.NET Version Note

If you are using .NET 5 or .NET 2, you must also add one these lines in the example below

Javascript 

keyotiSearch.setServiceType('core'); //for .NET 5

keyotiSearch.setServiceType('asmx'); //for .NET 2

Adding Location and/or Content Category Options (Pro version only)

Pro version users can setup location and content categorization. To provide the user with control over which categories to search add DIVs with ID's sew_locationChooserControl and/or sew_contentChooserControl. At runtime these will hold location radio button controls and content checkbox controls, be default.

Javascript / HTML 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link href="Keyoti_SearchEngine_Web_Common/SearchUnit.css" rel="stylesheet" />
        <script src="Keyoti_SearchEngine_Web_Common/SearchUnit.js"></script>
    </head>
    <body>
        <div id="sew_searchBoxControl"></div>
        
       <div id="sew_locationChooserControl"></div>
       <div id="sew_contentChooserControl"></div>
        <div id="sew_searchResultControl"></div>
    </body>
</html>

Updating results based on category selection changes

By default, when the user changes a selection the results will automatically update (a new search is initiated to do this). This may not be ideal user experience if searches are slower than a second or two (due to large index or busy server), or if it is preferable to let the user update all of their choices before refreshing the results. To use a button to update results use the following code:

Javascript / HTML 
    ...
        <script type="text/javascript">
            keyotiSearch.updateOnOptionChange = false;
        </script>
    ...
        <input type="button" onclick="keyotiSearch.showPage(1, true)" value="Update results" />

Setting the default Location or Content Category to search inside, with or without a control

To set the location or content category to search within, call the code below. Note that it works with or without the sew_locationChooserControl or sew_contentChooserControl DIVs on the page.

Javascript / HTML 
    ...
        <script type="text/javascript">
            keyotiCategoryChoosers.setSelectedLocation("locationName");  //set the default location to search inside
            keyotiCategoryChoosers.setSelectedContents(["contentName1", "contentName2"]);  //set the default contents to search inside
        </script>
    ...

Templating the Controls

For example, to use a SELECT control in the location chooser;

HTML 
    ...
    <span id="sew_locationChooserControl">
        <select id="sew_locationOptionTEMPLATE" class="sew_locationOption">                   
            <option class="sew_locationOptionItem" value="${Value}">${Value}</option>
        </select>
    </span>
    ...

The dynamic elements are: ${Value} (the location name text) and ${Id} which is a unique integer for the location option.

In the above example, the template is defined in a SELECT element. The templating engine will put location items inside the SELECT as OPTION elements - in other words, the content of the SELECT element is repeated for each location item.

Remember that the search engine can only search one location category at a time (it can search multiple content categories), therefore it could be confusing to the user if the control used allows multiple selections.

The default templates for location and content choosers are;

HTML 
    ...
    <div id="sew_locationChooserControl">
        <div id="sew_locationOptionTEMPLATE" class="sew_locationOption">
            <label>
                <input type="radio" name="sew_locationOption" class="sew_locationOptionItem" value="${Value}"/>${Value}
            </label>
        </div>
    </div>

    <div id="sew_contentChooserControl">
        <div id="sew_contentOptionTEMPLATE" class="sew_contentOption">
            <label>
                <input type="checkbox" class="sew_contentOptionItem" value="${Value}"/>${Value}
            </label>
        </div>
    </div>
    ...

Modifying the Display Text Used for a Location or Content Category

By default the category name as contained in the index (backend) is displayed to the user (frontend), but it is possible to modify that. To do that override keyotiCategoryChoosers.convertLocationBackendNameToFrontEndName and/or keyotiCategoryChoosers.convertContentBackendNameToFrontEndName.

For example there is a default location named "All", to change it to "Everything" use;

Javascript 
     ...
    keyotiCategoryChoosers.convertLocationBackendNameToFrontEndName = function (locationName, convertBack) {
        if (!convertBack) {
            if (locationName == "All") return "Everything";
        } else {
            if (locationName == "Everything") return "All";
        }
        return locationName;
    }
    ...

The 'convertBack' parameter indicates that the reverse conversion is required.

Similarly to convert a content category named "Forum" to "ABC".

Javascript 
     ...
    keyotiCategoryChoosers.convertContentBackendNameToFrontEndName = function (contentName, convertBack) {
        if (!convertBack) {
            if (contentName == "Forum") return "ABC";
        } else {
            if (contentName == "ABC") return "Forum";
        }
        return contentName;
    }
    ...